<template>
  <n-card :bordered="false" class="rounded-16px shadow-sm">
    <div class="flex-y-center justify-between border-b-3 border-blue-300">
      <div class="flex-y-center py-6">
        <n-avatar class="w-100px h-100px" style="background-image: linear-gradient( 135deg, #FFF6B7 10%, #F6416C 100%);"  round :src="auth.userInfo.avatar" :fallback-src="auth.defAvatar" />
        <div class="pl-12px">
          <h3 class="text-18px font-semibold">Hi！{{ auth.userInfo.userName }},</h3>
          <h3 class="text-18px font-semibold py-2"> 今天又是充满活力的一天！</h3>
          <!-- <p class="leading-30px text-[#999]">{{auth.userInfo}}</p> -->
          <n-space >
            <n-tag v-for="role in auth.userInfo.roles"  round :bordered="false" >
              <span>{{ role.roleName }}</span>
              <template #avatar>
                <!-- <n-avatar src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg" /> -->
                <icon-ion:at-circle-outline></icon-ion:at-circle-outline>
              </template>
            </n-tag>
          </n-space>
        </div>
      </div>
    </div>
    <div class="pt-6 text-gray-400">
      <div class="flex justify-stretch" >
          <div class="w-35">
            上次登录时间：
          </div>
          <div class="w-full text-left">
            {{ auth.userInfo.preLoginDate }}
          </div>
        </div>
        <div class="flex justify-stretch py-2" >
          <div class="w-35">
            上次登录地址：
          </div>
          <div class="w-full text-left">
            {{ auth.userInfo.preLoginLocation }}
          </div>
        </div>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store/modules/auth';
defineOptions({ name: 'userInfo' });

const auth = useAuthStore();

</script>

<style scoped>
</style>
